<template>
	<view class="main">
		<scroll-view scroll-y class="page">
			<view class="header">
				<view class="t1" style="padding-left: 30rpx;font-size: 50rpx;">LeonZX CLIMS</view>
				<view class="t2" style="padding-left: 30rpx;font-size: 50rpx;">煤质检测信息管理系统</view>
				<view class="padding flex text-center text-grey bg-white shadow-warp" style="margin-top: 50rpx;">
					<view class="flex flex-sub flex-direction solid-right">
						<view class="text-xxl text-orange">{{suminfo[0]}}</view>
						<view class="margin-top-sm">
							<text class="cuIcon-edit"></text>待办</view>
					</view>
					<view class="flex flex-sub flex-direction solid-right">
						<view class="text-xxl text-blue">{{suminfo[1]}}</view>
						<view class="margin-top-sm">
							<text class="cuIcon-people"></text>人员</view>
					</view>
					<view class="flex flex-sub flex-direction solid-right">
						<view class="text-xxl text-green">{{suminfo[2]}}</view>
						<view class="margin-top-sm">
							<text class="cuIcon-list"></text>任务量</view>
					</view>
					<view class="flex flex-sub flex-direction">
						<view class="text-xxl text-green">{{suminfo[3]}}</view>
						<view class="margin-top-sm">
							<text class="cuIcon-baby"></text>存查样</view>
					</view>
				</view>
			</view>
			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius " style="background-color: #fff;padding: 20rpx;">
				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="qiun-title-dot-light">任务量</view>
				</view>
				<view class="qiun-charts">
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
					 :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA"
					 @touchend="touchEndLineA"></canvas>
				</view>
			</view>
			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius " style="background-color: #fff;padding: 20rpx;">
				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="qiun-title-dot-light">任务进度</view>
				</view>
				<view class="qiun-charts">
					<canvas canvas-id="canvasPie" id="canvasPie" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}"
					 @touchstart="touchPie"></canvas>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaPie = null;
	var canvaLineA = null;

	export default {
		data() {
			return {
				suminfo: [],
				Pie: {
					series: []
				},
				LineA: {
					categories: [],
					series: [
						{
							"name":'任务',
							"data":[]
						}
					]
				},
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
			}
		},
		created() {
			_self = this;
			this.cWidth = uni.upx2px(700);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData() {
				uni.request({
					url: this.$http + '/app/home/getHomeInfo',
					//data: this.param,
					header: {
						token: uni.getStorageSync("token")
					},
					method: 'POST',
					success: (res) => {
						if (res.statusCode == 200 && res.data.code == 0) {
							_self.suminfo = res.data.data.sumInfo;
							_self.Pie.series = res.data.data.taskInfo;
							_self.LineA.categories = res.data.data.monthList;
							_self.LineA.series[0].data = res.data.data.monthTaskList;
							_self.showPie("canvasPie", _self.Pie);
							_self.showLineA("canvasLineA", _self.LineA);
						} else {
							uni.showToast({
								icon: 'none',
								title: '查询数据失败，请重试！'
							});
						}
					},
					fail: function() {
						uni.showToast({
							icon: 'none',
							title: '服务器请求超时！'
						});
					}
				})
			},
			showPie(canvasId, chartData) {
				canvaPie = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							border: true,
							borderColor: '#FFFFFF',
							borderWidth: 3
						}
					},
				});
			},
			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
				canvaPie.touchLegend(e, {
					animation: true
				});
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [15, 30, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					dataLabel: true,
					dataPointShape: true,
					dataPointShapeType: 'hollow',
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 12,
						scrollShow: true,
						scrollAlign: 'left'
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						splitNumber: 10,
						min: 0,
						format: (val) => {
							return val.toFixed(0)
						} //如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					},
				});

			},
			touchLineA(e) {
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			}
		}
	}
</script>

<style>
	.main {
		display: flex;
		flex-direction: column;
		display: flex;
		align-items: left;
		justify-content: start;
		height: 100vh;
	}

	.header {
		background-image: url(../../static/BasicsBg.png);
		background-size: contain;
		width: 100%;
		height: 437.5rpx;
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: flex-end;
		color: #fff;
	}

	.pie {
		width: 666.66rpx;
		height: 500rpx;
	}
</style>
